<!--  -->
<template>
  <div class="landing" :class="{'landing-change': changeStyle}">
    <div class="landingtop">
      <div>
        <h2 class="animated rubberBand">BitaHub</h2>
        <p>依托于类脑云OS，构建高效的AI开发环境</p>
        <el-button class="landingtopbtn animated zoomIn" @click="toExperience">{{this.userInfo && this.userInfo.token?"进入系统":"免费体验"}}</el-button>
        <div class="computer-people animated bounceInDown"></div>
      </div>
    </div>
    <div class="landing-characteristics">
      <h4>简单、易用、可靠</h4>
      <p id="landing-characteristics">支持GPU在线服务节点，云计算全面加速</p>
      <el-row :gutter="allDistancem" class="landing-characteristics-con">
        <el-col :span="8">
          <div class="landing-characteristics-con-all landing-characteristics-item" :class="[{animated:characteristicsBtn},{fadeInLeftBig:characteristicsBtn}]">
            <div><img src="@/common/image/landing-characteristics-con-all.png" alt=""></div>
            <p>{{gpuInfo.gpuTotal}}&nbsp;GPU总数</p>
            <span></span>
          </div>
          </el-col>
        <el-col :span="8">
          <div class="landing-characteristics-con-user landing-characteristics-item" :class="[{animated:characteristicsBtn},{fadeInLeftBig:characteristicsBtn}]">
            <div><img src="@/common/image/landing-characteristics-con-user.png" alt=""></div>
            <p>{{gpuInfo.gpuUsingTotal}}&nbsp;正在使用GPU</p>
            <span></span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="landing-characteristics-con-calculate landing-characteristics-item" :class="[{animated:characteristicsBtn},{fadeInLeftBig:characteristicsBtn}]">
            <div><img src="@/common/image/landing-characteristics-con-calculate.png" alt=""></div>
            <p>{{gpuInfo.nodeTotal}}&nbsp;计算节点数</p>
            <span></span>
          </div>
          </el-col>
      </el-row>
    </div>
    <div class="landing-support">
      <div>
        <h4 id="landing-support">依托类脑云OS</h4>
        <el-row  :gutter="supportnum" class="landing-support-con">
          <el-col :span="8">
            <div class="landing-support-page landing-support-item" :class="[{animated:landingSupportBtn},{zoomIn:landingSupportBtn}]">
              <div><img src="@/common/image/landing-support-page-ico.png" alt=""></div>
              <h5>更直观交互页面</h5>
              <p>web端提交任务，可视化显示资源利用率，web端查看任务日志</p>
              <p class="landing-support-p">
                <span></span>
              </p>
            </div>
            </el-col>
          <el-col :span="8">
            <div class="landing-support-item" :class="[{animated:landingSupportBtn},{zoomIn:landingSupportBtn}]">
              <div><img src="@/common/image/landing-support-two-ico.png" alt=""></div>
              <h5>分布式训练的支持</h5>
              <p>便捷的分布式训练支持。一次作业提交中可包含多个子任务，可高效的进行跨机器的多任务训练</p>
              <p class="landing-support-p">
                <span></span>
              </p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="landing-support-item" :class="[{animated:landingSupportBtn},{zoomIn:landingSupportBtn}]">
              <div><img src="@/common/image/landing-support-three-ico.png" alt=""></div>
              <h5>免去运维压力</h5>
              <p>灵活的计算资源配置，高可用的架构设计，可靠的容灾自动恢复</p>
              <p class="landing-support-p">
                <span></span>
              </p>
            </div>
            </el-col>
        </el-row>
      </div>
    </div>
    <div class="landing-data-set" id="landing-data-show">
      <h4>开箱可用的数据集</h4>
      <p>{{totalDataSet}}个数据集 | {{dataSetCategory}}个数据集类目</p>
      <el-row :gutter="allDistancem" class="landing-data-set-con">
          <el-col :span="8" v-for="(item, index) in dataSets" :key="index">
          <div :class="index == 1 ? 'landing-data-set-active landing-data-set-item' : 'landing-data-set-item'">
            <h5>{{item.name}}</h5>
            <p>{{item.profile}}</p>
            <p>{{item.userProjectCount}}次使用</p>
            <div>
              <img v-if="index == 0" src="@/common/image/landing-open-box-one.png" alt="">
              <img v-if="index == 1" src="@/common/image/landing-open-box-two.png" alt="">
              <img v-if="index == 2" src="@/common/image/landing-open-box-three.png" alt="">
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="landing-data-set-more" @click="toMoreOpenBox">登录查看更多&nbsp;&nbsp;&rarr;</div>
      <div class="landing-data-set-img" :class="[{animated:landingData},{rotateInDownRight:landingData}]">
        <img src="@/common/image/landing-data-set-img.png" alt="">
      </div>
    </div>
    <div class="landing-projects">
      <div id="landing-projects-show">
        <p :class="[{animated:landingProjects},{tada:landingProjects}]">精选的公开项目<span>{{totalProject}}个公开项目 | {{projectCategory}}个分类</span></p>
        <div :class="[{animated:landingProjects},{fadeInRightBig:landingProjects}]">
          <img src="@/common/image/landing-little-people.png" alt="">
        </div>
      </div>
    </div>
    <div  id="landing-data-set" class="landing-projects-next" :class="[{animated:projectsNextBtn},{flipInX:projectsNextBtn}]">
      <el-row :gutter="allDistancem" class="landing-projects-con">
        <el-col :span="8" v-for="(item, index) in projects" :key="index">
          <div :class="index == 1?'landing-projects-item landing-projects-active':'landing-projects-item'">
            <h5>{{item.projectName}}</h5>
            <p>{{item.profile}}</p>
            <p>{{item.copyNumber}}次使用</p>
            <div>
              <img v-if="index == 0" src="@/common/image/landing-open-box-one.png" alt="">
              <img v-if="index == 1" src="@/common/image/landing-open-box-two.png" alt="">
              <img v-if="index == 2" src="@/common/image/landing-open-box-three.png" alt="">
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="landing-projects-more" @click="toProject">登录查看更多&nbsp;&nbsp;&rarr;</div>
    </div>
    <div class="landing-building">
      <img src="@/common/image/landing-building.png" alt="">
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import axios from 'axios'
import { getOpenProjectInfo, getOpenProjectCategory } from '@/api/project'
import { getOpenDataSetInfo } from '@/api/dataset'
export default {
  data () {
    return {
      gpuInfo: {
        'gpuTotal': 0,
        'gpuUsingTotal': 0,
        'nodeTotal': 0
      },
      dataSets: [],
      projects: [],
      totalDataSet: 0,
      totalProject: 0,
      characteristicsBtn: false,
      projectsNextBtn: false,
      landingProjects: false,
      landingData: false,
      landingSupportBtn: false,
      screenWidth: document.body.clientWidth,
      changeStyle: false,
      supportnum: parseInt(0),
      allDistancem: parseInt(0),
      dataSetCategory: '',
      projectCategory: ''
    }
  },

  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },

  watch: {
    screenWidth (val) {
      if (!this.timer) {
        this.screenWidth = val
        this.timer = true
        let that = this
        setTimeout(function () {
          that.init(that.screenWidth)
          that.timer = false
        }, 400)
      }
    }
  },

  mounted () {
    this._getGpuInfo()
    this._getOpenDataSetList()
    this._getOpenProjectList()
    this._getOpenProjectCategory()
    this.init(this.screenWidth)
    window.addEventListener('scroll', this.handleFun)
    const that = this
    this.clientWidth = `${document.documentElement.clientWidth}`
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },

  beforeDestroy () {
    window.removeEventListener('scroll', this.handleFun)
  },

  methods: {
    init (screenWidth) {
      if (screenWidth <= 1400) {
        this.changeStyle = true
        this.supportnum = parseInt(50)
        this.allDistancem = parseInt(35)
      } else {
        this.changeStyle = false
        this.supportnum = parseInt(150)
        this.allDistancem = parseInt(29)
      }
    },
    handleFun () {
      if (document.getElementById('landing-characteristics')) {
        var acharacteristics = document.getElementById('landing-characteristics').offsetTop
        var ahcharacteristics = document.getElementById('landing-characteristics').offsetHeight
      }
      if (document.getElementById('landing-data-set')) {
        var bset = document.getElementById('landing-data-set').offsetTop
        var bhset = document.getElementById('landing-data-set').offsetHeight
      }
      if (document.getElementById('landing-projects-show')) {
        var cprojects = document.getElementById('landing-projects-show').offsetTop
        var chprojects = document.getElementById('landing-projects-show').offsetHeight
      }
      if (document.getElementById('landing-data-show')) {
        var dshow = document.getElementById('landing-data-show').offsetTop
        var dhshow = document.getElementById('landing-data-show').offsetHeight
      }
      if (document.getElementById('landing-support')) {
        var esupport = document.getElementById('landing-support').offsetTop
        var ehsupport = document.getElementById('landing-support').offsetHeight
      }
      var top = (document.body.scrollTop || document.documentElement.scrollTop)
      var h = document.documentElement.clientHeight || document.body.clientHeight
      var that = this
      if (acharacteristics >= (top - ahcharacteristics) && acharacteristics < (top + h)) {
        (function () {
          that.characteristicsBtn = true
        })()
      }
      if (bset >= (top - bhset) && bset < (top + h)) {
        (function () {
          that.projectsNextBtn = true
        })()
      }
      if (cprojects >= (top - chprojects) && cprojects < (top + h)) {
        (function () {
          that.landingProjects = true
        })()
      }
      if (dshow >= (top - dhshow) && dshow < (top + h)) {
        (function () {
          that.landingData = true
        })()
      }
      if (esupport >= (top - ehsupport) && esupport < (top + h)) {
        (function () {
          that.landingSupportBtn = true
        })()
      }
    },
    // 跳转登录
    toLogin () {
      this.$router.push({ path: '/login' })
    },
    // 去体验
    toExperience () {
      if (this.userInfo && this.userInfo.token) {
        this.$router.push({ path: '/project/list' })
      } else {
        this.$router.push({ path: '/login' })
      }
    },
    // 开箱跳转
    toMoreOpenBox () {
      if (this.userInfo && this.userInfo.token) {
        this.$router.push({ path: '/dataset' })
      } else {
        this.$router.push({ path: '/login' })
      }
    },
    // 去精选公开项目
    toProject () {
      if (this.userInfo && this.userInfo.token) {
        this.$router.push({ path: '/openproject' })
      } else {
        this.$router.push({ path: '/login' })
      }
    },
    // 查询GPU信息
    _getGpuInfo () {
      let url = `/bitahub/article/gpu/getGpuInfo`
      axios({
        method: 'get',
        url: url
      }).then(res => {
        if (res.data.code === 60001) {
          this.$router.push({ path: '/login' })
          return
        }
        this.gpuInfo = res.data.result
      }).catch(error => {
        console.log('error', error)
      })
    },
    // 获取着录页公开数据集
    _getOpenDataSetList () {
      let query = `?cp=1&ps=6`
      getOpenDataSetInfo(query).then(res => {
        if (res.message.code === 0) {
          this.dataSets = res.data.list.slice(0, 3)
          this.totalDataSet = res.data.total
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 类目及分类信息
    _getOpenProjectCategory () {
      getOpenProjectCategory().then(res => {
        if (res.message.code === 0) {
          this.dataSetCategory = res.data.dateBaseCount
          this.projectCategory = res.data.projectCount
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 获取着录页公开项目信息
    _getOpenProjectList () {
      let query = `?sortType=1&cp=1&ps=4`
      getOpenProjectInfo(query).then(res => {
        if (res.message.code === 0) {
          this.projects = res.data.list.slice(0, 3)
          this.totalProject = res.data.total
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  }
}

</script>
<style lang="stylus">
$clinewidth = 1200px
$clinewidthchange = 800px
title-style-change()
  font-size 32px
  line-height 45px
  margin-bottom 21px
title-style()
  font-size 36px
  line-height 43px
  color #2d323b
  margin-bottom 37px
  font-weight bold
get-more-change()
  font-size 14px
  line-height 20px
  padding 33px 0 173px
  color #8E9091
get-more()
  text-align center
  font-size 18px
  line-height 25px
  color #2d323b
  padding 41px 0 363px
  font-weight bold
  cursor pointer
item-style-change()
  padding 77px 27px 31px 25px
  >h5
    font-size 24px
    line-height 28px
    margin-bottom 26px
  >p:nth-of-type(1)
    -webkit-line-clamp 4
    margin-bottom 26px
  >div
    width 78px
    top -18px
item-style()
  border 2px solid #e7f4ff
  padding 71px 39px 31px 45px
  height 296px
  text-align right
  color #66BAFF
  position relative
  top 0
  left 0
  >h5
    font-size 42px
    line-height 50px
    margin-bottom 20px
    color #66BAFF
    display block
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
  >p:nth-of-type(1)
    font-size 16px
    line-height 22px
    word-break break-all
    word-wrap break-word
    overflow hidden
    text-overflow ellipsis
    display -webkit-box
    /*! autoprefixer: off */
    -webkit-box-orient vertical
    /* autoprefixer: on */
    -webkit-line-clamp 3
    margin-bottom 38px
  >p:nth-of-type(2)
    font-size 14px
    line-height 20px
    color #5fba7d
  >div
    position absolute
    top -20px
    left 0
    width 121px
    height auto
    >img
      width 100%
      height auto
item-style-active()
  border none
  background #66baff
  color #ffffff
  >h5,>p:nth-of-type(2)
    color #ffffff
.landing
  font-family PingFangSC-Medium
  width 100%
  overflow hidden
  >.landing-building
    width 100%
    height auto
    font-size 0
    >img
      width 100%
      height auto
  >.landing-projects-next
    width $clinewidth
    margin 0 auto 0
    &.animated
      animation-delay 0.8s
    .landing-projects-con
      padding-top 14px
      .landing-projects-item
        item-style()
      .landing-projects-active
        item-style-active()
    .landing-projects-more
      get-more()
      padding-bottom 46px
  >.landing-projects
    width 100%
    height 489px
    background-image url('../../common/image/landing-projects-bg.png')
    background-size 100% 100%
    >div
      width $clinewidth
      margin 0 auto 0
      padding-top 264px
      position relative
      top 0
      left 0
      >p
        padding-left 420px
        font-size 36px
        line-height 50px
        color #2D323B
        font-weight bold
        &.animated
          animation-duration 1.5s
        >span
          margin-left 38px
          font-size 18px
          line-height 25px
          color #66baff
          font-weight normal
      >div
        position absolute
        top -229px
        left 0
        width 551px
        height 412px
        opacity 0
        &.animated
          opacity 1
        >img
          width 100%
          height 100%
  >.landing-data-set
    width $clinewidth
    margin 0 auto 0
    overflow hidden
    position relative
    top 0
    left 0
    >h4
      font-size 36px
      line-height 50px
      margin 311px 0 25px
      color #2D323B
      font-weight bold
    >p
      font-size 18px
      line-height 25px
      color #66BAFF
    >.landing-data-set-con
      padding-top 187px
      .landing-data-set-item
        item-style()
      .landing-data-set-active
        item-style-active()
    >.landing-data-set-img
      position absolute
      top 109px
      right -60px
      width 596px
      height 469px
      &.animated
        animation-delay 0.5s
      >img
        width 100%
        height 100%
    >.landing-data-set-more
      get-more()
  >.landing-support
    width 100%
    height 821px
    background-image url('../../common/image/landing-support-bg.png')
    background-size 100% 100%
    overflow hidden
    >div
      width $clinewidth
      margin 189px auto 0
      >h4
        title-style()
      >.landing-support-con
        padding-top 105px
        .landing-support-item
          text-align center
          box-sizing border-box
          border-bottom 2px solid transparent
          min-height 357px
          position relative
          top 0
          left 0
          &.animated
            animation-delay 0.5s
          &:hover.landing-support-p
            display block
          >div
            width 98px
            height auto
            margin 0 auto 49px
            transition-duration 0.2s
            >img
              width 100%
              height 100%
          >h5
            font-size 30px
            line-height 42px
            color #2D323B
            margin-bottom 26px
          >p:nth-of-type(1)
            font-size 18px
            line-height 30px
            color #9f9f9f
          >p:nth-of-type(2)
            height 4px
            width 100%
            transition-duration 1s
            opacity 0
            position absolute
            bottom 0
            left 0
            >span
              width 60px
              height 100%
              background #66baff
              display inline-block
              margin 0 auto 0
          &:hover p:nth-of-type(2)
            opacity 1
          &:hover >div
            width 116px
            height auto
  >.landing-characteristics
    width $clinewidth
    margin 0 auto 0
    padding-top 0px
    >h4
      title-style()
    >p
      font-size 18px
      line-height 25px
      color #66BAFF
    >.landing-characteristics-con
      padding 81px 0 142px
      .landing-characteristics-item
        border 2px solid #e7f4ff
        padding-bottom 55px
        overflow hidden
        background #ffffff
        position relative
        top 0
        left 0
        >div
          width 46px
          height 46px
          margin 49px auto 37px
          img
            width 100%
            height 100%
        >p
          text-align center
          font-size 24px
          line-height 33px
          color #66baff
          text-align center
        >span
          display inline-block
          width 165px
          height 5px
          background #66BAFF
          position absolute
          bottom 0
          left 50%
          transform translate(-50%,0)
      .landing-characteristics-con-all
        background #66baff
        >p
          color #ffffff
      .landing-characteristics-con-user
        &.animated
          animation-delay 0.5s
      .landing-characteristics-con-calculate
        &.animated
          animation-delay 1s
  >.landingtop
    width 100%
    height 1013px
    box-sizing border-box
    background-image url('../../common/image/landing-top-bg.png')
    background-size 100% 100%
    >div
      width $clinewidth
      height 100%
      margin 0 auto 0
      padding-top 235px
      position relative
      top 0
      left 0
      >h2
        font-size 46px
        line-height 55px
        color #ffffff
        margin-bottom 27px
        display inline-block
      >p
        font-size 18px
        line-height 36px
        color #ffffff
        width 431px
        height 108px
        margin-bottom 44px
      >.landingtopbtn
        background #FF5159
        border none
        color #ffffff
        width 198px
        padding 5px 0
        line-height 25px
        font-size 18px
        border-radius 0
        &:hover
          background #E34F51
        &.animated
          animation-delay: 0.5s;
      >.computer-people
        position absolute
        bottom -36px
        right 0
        width 597px
        height 546px
        background-image url('../../common/image/landing-top-computer-people.png')
        background-size 100% 100%
        &.animated
          animation-duration: 2s
.landing-change
  >.landing-projects-next
    width $clinewidthchange
    .landing-projects-con
      padding-top 36px
      .landing-projects-item
        item-style-change()
    .landing-projects-more
      get-more-change()
      padding-bottom 29px
  >.landing-projects
    height 305px
    >div
      width $clinewidthchange
      padding-top 139px
      >p
        padding-left 326px
        font-size 32px
        line-height 45px
        >span
          margin-left 20px
          font-size 16px
          line-height 22px
      >div
        position absolute
        top -67px
        left 0
        width 237px
        height 176px
  >.landing-data-set
    width $clinewidthchange
    >h4
      font-size 32px
      line-height 45px
      margin 154px 0 21px
    >p
      font-size 16px
      line-height 22px
    >.landing-data-set-con
      padding-top 90px
      .landing-data-set-item
        item-style-change()
    >.landing-data-set-img
      position absolute
      top 0px
      right -69px
      width 372px
      height 291px
    >.landing-data-set-more
      get-more-change()
  >.landing-support
    height 513px
    >div
      width $clinewidthchange
      margin 79px auto 0
      >h4
        title-style-change()
      >.landing-support-con
        padding-top 86px
        .landing-support-item
          min-height 240px
          >div
            width 52px
            height auto
            margin 0 auto 30px
          >h5
            font-size 20px
            line-height 28px
            margin-bottom 8px
          >p
            font-size 16px
            line-height 30px
          &:hover >div
            width 58px
            height auto
  >.landing-characteristics
    width $clinewidthchange
    padding-top 19px
    >h4
      title-style-change()
    >p
      font-size 16px
      line-height 22px
    >.landing-characteristics-con
      padding 94px 0 76px
      .landing-characteristics-item
        padding-bottom 64px
        >div
          width 46px
          height 46px
          margin 49px auto 41px
        >p
          font-size 20px
          line-height 28px
  >.landingtop
    height 584px
    >div
      width $clinewidthchange
      padding-top 79px
      >h2
        font-size 32px
        line-height 45px
        margin-bottom 18px
      >p
        font-size 16px
        line-height 36px
        color #ffffff
        width 350px
        height 108px
        margin-bottom 20px
      >.landingtopbtn
        background #FF5159
        border none
        color #ffffff
        width 152px
        padding 7px 0
        line-height 20px
        font-size 14px
      >.computer-people
        position absolute
        bottom -74px
        right 0
        width 273px
        height 250px
</style>
